<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预约情况</title>
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/base/base.css" >
    <link rel="stylesheet" href="../static/css/components/act-require.css">
    <link rel="stylesheet" href="../static/css/components/tea.css">
    <link rel="stylesheet" href="../static/css/components/active.css">
</head>

<body>
    <ul class="layui-nav header-nav" lay-filter="">
        <li class="layui-nav-item">
            <a href="">logo</a>
        </li>
        <li class="layui-nav-item  ">
            <a href="../index.html">文章管理</a>
        </li>
        <li class="layui-nav-item">
            <a href="../activity/active.html">活动管理</a>
        </li>
        <li class="layui-nav-item layui-this">
            <a href="tea.html">茶馆管理</a>
        </li>
        <li class="layui-nav-item">
            <a href="../collection/collection.html">藏家行情</a>
        </li>
        <li class="layui-nav-item">
            <a href="../proprietary/proprietary.html">自营商品</a>
        </li>
        <li class="layui-nav-item">
            <a href="../banner/banner.html">banner管理</a>
        </li>
        <li class="layui-nav-item">
            <a href="../sms/sms.html">短信模板</a>
        </li>
        <!-- 头部右侧 -->
        <div class="header-right">
            <div class="help">
                <i class="layui-icon layui-icon-help ic-help" style="font-size: 6px; "></i>
            </div>
            <li class="layui-nav-item">
    
                <a href="">帮助</a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
            </li>
        </div>
    </ul>

    <!-- 面包屑 -->
    <div class="breadcrumb">
        <span class="layui-breadcrumb"lay-separator=">">
            <a href="">茶馆管理</a>
            <a href="">全部茶馆</a>
          </span>
        </div>


  <!-- 中间内容区 -->
  <div class="container">  
      <div class="con-left fl">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">茶馆管理</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="tea.html">全部茶馆</a>
                        </dd>
                        <dd class="active-require">
                            <a href="javascript:;" class="layui-this">预约请求</a>
                            <div class="active-circle">1</div>
                        </dd>
                    </dl>
                </li>
            </ul>
      </div>
      <!-- 中间区域右侧 -->
      <div class="con-right fr">
          <!-- 上面文章标签选择区域 -->
        <div class="layui-tab layui-tab-card card">
            <ul class="layui-tab-title add">
                <li class="layui-this">已读</li>
                <li>未读</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!-- 内容区 -->
                    <table class="layui-table art-table require-tab" lay-skin="line" lay-size="sm">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                            <tr class="tea-header">
                                <th>申请人(微信昵称)</th>
                                <th>茶馆</th>
                                <th>手机号</th>
                                <th>预约时间端</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>小明爱喝茶</td>
                                <td>【壹号茶馆】|南京市</td>
                                <td>13978645677</td>
                                <td>2016-09-21
                                    <p> 08:50:08</p>
                                </td>
                            </tr>
        
                            <tr>
                                <td>小明爱喝茶</td>
                                <td>【壹号茶馆】|南京市</td>
                                <td>13978645677</td>
                                <td>2016-09-21
                                    <p> 08:50:08</p>
                                </td>
                            </tr>
                            <tr>
                                <td>小明爱喝茶</td>
                                <td>【壹号茶馆】|南京市</td>
                                <td>13978645677</td>
                                <td>2016-09-21
                                    <p> 08:50:08</p>
                                 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="layui-tab-item">
                     未读信息
                </div>
            </div>
        </div>

                <!-- 分页 -->
                  <div id="page"></div>
                   
              <!-- <div id="page" class="fr"></div> -->
              
      </div>
  </div>




    <script src="../static/lib/layui/layui.all.js"></script>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/base.js"></script>
    <script>
            ;!function(){
              //无需再执行layui.use()方法加载模块，直接使用即可
              var form = layui.form
              ,layer = layui.layer;
              
            }();
            </script> 


    <script>
     layui.use(['laypage', 'layer'], function(){
     var laypage = layui.laypage
    ,layer = layui.layer;
  
  
  //完整功能
  laypage.render({
    elem: 'page'
    ,count: 50
    ,limit:3
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    ,jump: function(obj){
      console.log(obj)
    }
  });
  

  
  //调用分页
//   laypage.render({
//     elem: 'demo20'
//     ,count: data.length
//     ,jump: function(obj){
//       //模拟渲染
//       document.getElementById('biuuu_city_list').innerHTML = function(){
//         var arr = []
//         ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
//         layui.each(thisData, function(index, item){
//           arr.push('<li>'+ item +'</li>');
//         });
//         return arr.join('');
//       }();
//     }
//   });
  
});
</script>



</body>

</html>